<template>
	<view class="home">
		<headerTar :title="titleName">
		</headerTar>
		<map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true"
			@markertap="markertap" @callouttap='callouttap' @tap="tap" :scale="scale">
		</map>
		<view class="bottom" v-if="propList">
			<view class="prop">
				<view class="c_box" :class="{'b_box_hui':isHui(propList.online,propList.deviceStatus)}"
					@click="goScanCodeDetail(propList)">
					<view class="c_txt1">{{propList.name}}</view>
					<view class="c_txt2">{{propList.address}}</view>
					<view class="c_txt3">
						<view class="c_tip">闲</view> 空闲 <text>{{propList.idlePortNum}}</text>个插座 |
						共<text>{{propList.portNum}}</text>个插座
					</view>
					<view class="go">
						距您{{ handleDistance(propList.distance) }}
					</view>
					<view class="goScanCode" @click.stop="go(propList)">
						<img class="img" src="/static/index/daohang.png" alt="" />导航
					</view>
					<view class="hui" v-if="propList.online==0">
						<view class="hui_t1">
							维护中
						</view>
						<view class="hui_t2">
							不可使用
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="map_Tip" @click="goIndex">
			<u-icon name="list-dot" size="34" color="#30bf62" @click="goIndex"></u-icon>
		</view>
		<!-- //隐私协议 -->
		<!-- <privacyAgreenPop /> -->
		<privacyAgreenPop @handleAgreeSon="handleAgree" @handleDisagreeSon="handleDisagree">
		</privacyAgreenPop>
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	import QQMapWX from '@/static/map/qqmap-wx-jssdk.js';
	import {
		nearbyDeviceApi
	} from '@/api/map.js'
	import headerTar from '@/components/headerTar/header'
	import privacyAgreenPop from '@/components/privacyAgreen/privacyAgreenPop'
	export default {
		components: {
			headerTar,
			privacyAgreenPop
		},
		data() {
			return {
				titleName: '设备地图',
				latitude: '',
				longitude: '',
				qqmapsdk: '',
				scale: 12,
				propList: '', //弹窗的值
				privacyWxPopShow: true, //隐私协议弹窗
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				covers: [{ //当前位置的经度：113.93041  当前位置的latitude纬度：22.53332
						id: 1,
						name: '1号机',
						address: '广东省 深圳市 南山区 桃园路',
						width: 30,
						height: 30,
						latitude: 22.53338,
						longitude: 113.93041,
						iconPath: '../../static/map/biao.png',
					},
					{
						id: 2,
						name: '2号机',
						address: '广东省 深圳市 南山区 桃园路',
						width: 30,
						height: 30,
						latitude: 21.53332,
						longitude: 113.93048,
						iconPath: '../../static/map/biao.png',
					},
					{
						id: 3,
						name: '3号机',
						address: '广东省 深圳市 南山区 桃园路',
						width: 30,
						height: 30,
						latitude: 22.53322,
						longitude: 113.93041,
						iconPath: '../../static/map/biao.png',
					},
				],
			}
		},
		created() {
			// 实例化API核心类
			this.qqmapsdk = new QQMapWX({
				key: 'TRKBZ-W5V6L-EY7P5-MOSDB-T2AUT-UXBMX'
			});
		},
		onshow() {

		},
		methods: {
			goIndex() {
				uni.redirectTo({
					url: '/pages/search/search'
				});
			},
			handleDistance(val) {
				let str = "";
				val > 1000 ? (str = (val / 1000).toFixed(2) + "km") : (str = val + "m");
				return str;
			},
			isHui(val, val2) {
				let str = true;
				if (val == 1 && val2 == 1) {
					str = false
				} else {
					str = true
				}
				return str
			},
			go(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.openLocation({
					latitude: v.latitude,
					longitude: v.longitude,
					name: v.deviceName,
					address: v.address,
					scale: 18
				});
			},
			handleAgree() {
				console.log("用户同意隐私授权, 接下来可以调用隐私协议中声明的隐私接口")
				this.getDWei()
				uni.setStorageSync("privacyAgree", true)
			},
			handleDisagree() {
				console.log("用户不同意隐私授权")
			},
			ScanCodeDetail(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.navigateTo({
					url: '/pages/scanCodeDetail/scanCodeDetail?deviceId=' + JSON.stringify(this.propList)
				});
			},
			// 点击标记点时触发
			markertap(e) {
				console.log('点击标记点时触发', e)
				let clickmarkerId = e.mp.detail.markerId
				//根据e.mp.detail.markerId跟标记点的id进行判断，如果相等就进行赋值
				for (var i = 0; i < this.covers.length; i++) {
					if (this.covers[i].id == clickmarkerId) {
						this.propList = this.covers[i]
					}
				}
			},
			// 点击标记点对应的气泡时触发，
			callouttap(e) {
				console.log('点击标记点对应的气泡时触发', e)
			},
			// 点击地图时触发
			tap(e) {
				console.log('点击地图时触发', e)
			},
			getDWei() {
				let that = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							console.log("没有权限");
							//拉取授权窗口
							uni.authorize({
								scope: "scope.userLocation",
								success: () => {
									uni.getLocation({
										type: 'gcj02',
										success: function(res) {
											console.log('当前位置的经度：' + res.longitude);
											console.log('当前位置的纬度：' + res.latitude);
											that.latitude = res.latitude.toFixed(6)
											that.longitude = res.longitude.toFixed(6)
											console.log(that.latitude,
												'==that.latitude');
											//获取附近电桩
											nearbyDeviceApi({
												longitude: res.longitude,
												latitude: res.latitude,
												pageSize: that.queryParams
													.pageSize,
												pageNum: that.queryParams
													.pageNum
											}).then(res2 => {
												console.log(res2);
												that.covers = []
												res2.rows.map((v, i) => {
													that.covers.push({
														id: (i -
																0
															) +
															1,
														name: v
															.deviceName,
														address: v
															.address,
														width: 40,
														height: 40,
														latitude: v
															.latitude,
														longitude: v
															.longitude,
														deviceId: v
															.deviceId,
														idlePortNum: v
															.idlePortNum,
														distance: v
															.distance,
														portNum: v
															.portNum,
														online: v
															.online,
														deviceStatus: v
															.deviceStatus,
														iconPath: '../../static/map/biao.png',
													})
												})
											})
										}
									});
								},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													}
												})
											} else if (res.cancel) {
												console.log("用户点击不授权");
											}
										}
									})
								}
							})
						} else {
							//有权限直接获取
							uni.getLocation({
								type: 'gcj02',
								success: (res) => {
									console.log("获取当前位置的接口", res);
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									that.latitude = res.latitude.toFixed(6)
									that.longitude = res.longitude.toFixed(6)
									//获取附近电桩
									nearbyDeviceApi({
										longitude: res.longitude,
										latitude: res.latitude,
										pageSize: that.queryParams
											.pageSize,
										pageNum: that.queryParams
											.pageNum
									}).then(res2 => {
										console.log(res2);
										that.covers = []
										res2.rows.map((v, i) => {
											that.covers.push({
												id: (i -
														0) +
													1,
												name: v.deviceName,
												address: v.address,
												width: 40,
												height: 40,
												latitude: v.latitude,
												longitude: v.longitude,
												deviceId: v.deviceId,
												idlePortNum: v.idlePortNum,
												portNum: v.portNum,
												distance: v
													.distance,
												online: v
													.online,
												deviceStatus: v
													.deviceStatus,
												iconPath: '../../static/map/biao.png',
											})
										})
									})
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
	}

	.map {
		width: 100vw;
		height: 100vh;
		opacity: 0.9;
	}

	.map_Tip {
		position: fixed;
		right: 20rpx;
		top: 50%;
		margin-top: -60rpx;
		padding: 5rpx;
		font-weight: bold;
		border: 2px solid #f7f7f7;
		border-radius: 10rpx;
		background-color: #fff;
		z-index: 9999;
		overflow: hidden;
	}

	.bottom {
		position: fixed;
		bottom: 30rpx;
		left: 0rpx;
		width: 100%;

		.prop {
			height: 220rpx;
			margin: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-sizing: border-box;
			overflow: hidden;

			.c_box {
				position: relative;
				height: 180rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				// border: 2rpx solid #e5e5e5;
				// background-color: #fff;

				.c_txt1 {
					width: 435rpx;
					font-size: 34rpx;
					font-weight: bold;
				}

				.c_txt2 {
					width: 435rpx;
					margin: 24rpx 0;
					font-size: 26rpx;
				}

				.c_txt3 {
					font-size: 24rpx;
					color: #7bdbaa;
				}

				.c_tip {
					display: inline-block;
					padding: 6rpx;
					margin-right: 16rpx;
					font-size: 24rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #30bf62;
				}

				.go {
					position: absolute;
					right: 40rpx;
					top: 30rpx;
					padding: 5rpx 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					border-radius: 20rpx;
					// border: 2rpx solid #e5e5e5;
				}

				.goScanCode {
					position: absolute;
					right: 40rpx;
					bottom: 34rpx;
					width: 160rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 28rpx;
					text-align: center;
					border-radius: 50rpx;
					color: #30bf62;
					border: 2rpx solid #30bf62;

					.img {
						// margin-left: 10rpx;
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-top: -6rpx;
					}
				}

				.hui {
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -60rpx;
					margin-top: -75rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 150rpx;
					border-radius: 75rpx;
					background-color: #6a6b6c;
					opacity: 0.7;

					.hui_t1 {
						color: #efefef;
						font-size: 36rpx;
					}

					.hui_t2 {
						color: #dfdfdf;
						font-size: 24rpx;
					}
				}
			}

			.b_box_hui {
				opacity: 1;
				background-color: #bcbcbc;
			}
		}
	}
</style>